import React from 'react';
import { Pattern, PatternInstance } from '../../types/editor';
import {
  Card,
  Select,
  Button,
  FormLayout,
  TextField,
  Box,
  Text,
  BlockStack,
  InlineStack
} from '@shopify/polaris';

interface ControlPanelProps {
  availablePatterns: Pattern[];
  selectedPattern: PatternInstance | null;
  onAddPattern: (patternId: string) => void;
  onUpdatePattern: (pattern: PatternInstance) => void;
  onDeletePattern: (id: string) => void;
}

const ControlPanel: React.FC<ControlPanelProps> = ({
  availablePatterns,
  selectedPattern,
  onAddPattern,
  onUpdatePattern,
  onDeletePattern,
}) => {
  const [selectedPatternId, setSelectedPatternId] = React.useState('');

  const handleAddPattern = () => {
    console.log('ControlPanel: handleAddPattern called with patternId:', selectedPatternId);
    if (selectedPatternId) {
      onAddPattern(selectedPatternId);
      setSelectedPatternId('');
    }
  };

  const handlePropertyChange = (
    property: keyof PatternInstance,
    value: number
  ) => {
    if (selectedPattern) {
      onUpdatePattern({
        ...selectedPattern,
        [property]: value,
      });
    }
  };

  return (
    <BlockStack gap="400">
      <Card>
        <BlockStack gap="400">
          <Text variant="headingMd" as="h2">选择图案</Text>
          <Select
            label=""
            options={[
              { label: '请选择图案', value: '' },
              ...availablePatterns.map((pattern) => ({
                label: pattern.name,
                value: pattern.id
              }))
            ]}
            value={selectedPatternId}
            onChange={setSelectedPatternId}
          />
          <Button onClick={handleAddPattern} fullWidth>添加图案</Button>
        </BlockStack>
      </Card>

      {selectedPattern && (
        <Card>
          <BlockStack gap="400">
            <Text variant="headingMd" as="h2">图案属性</Text>
            
            <FormLayout>
              <BlockStack gap="400">
                <Text variant="headingSm" as="h3">位置</Text>
                <InlineStack gap="400" align="space-between">
                  <Box width="50%">
                    <TextField
                      label="X坐标"
                      type="number"
                      value={selectedPattern.x.toString()}
                      onChange={(value) => handlePropertyChange('x', parseFloat(value))}
                      autoComplete="off"
                    />
                  </Box>
                  <Box width="50%">
                    <TextField
                      label="Y坐标"
                      type="number"
                      value={selectedPattern.y.toString()}
                      onChange={(value) => handlePropertyChange('y', parseFloat(value))}
                      autoComplete="off"
                    />
                  </Box>
                </InlineStack>
              </BlockStack>

              <BlockStack gap="400">
                <Text variant="headingSm" as="h3">大小</Text>
                <InlineStack gap="400" align="space-between">
                  <Box width="50%">
                    <TextField
                      label="宽度比例"
                      type="number"
                      value={selectedPattern.scaleX.toString()}
                      onChange={(value) => handlePropertyChange('scaleX', parseFloat(value))}
                      autoComplete="off"
                    />
                  </Box>
                  <Box width="50%">
                    <TextField
                      label="高度比例"
                      type="number"
                      value={selectedPattern.scaleY.toString()}
                      onChange={(value) => handlePropertyChange('scaleY', parseFloat(value))}
                      autoComplete="off"
                    />
                  </Box>
                </InlineStack>
              </BlockStack>

              <BlockStack gap="400">
                <Text variant="headingSm" as="h3">旋转</Text>
                <TextField
                  label="角度 (0-360)"
                  type="number"
                  value={selectedPattern.angle.toString()}
                  onChange={(value) => handlePropertyChange('angle', parseFloat(value))}
                  autoComplete="off"
                />
              </BlockStack>
            </FormLayout>

            <Button
              onClick={() => onDeletePattern(selectedPattern.id)}
              tone="critical"
              fullWidth
            >
              删除图案
            </Button>
          </BlockStack>
        </Card>
      )}
    </BlockStack>
  );
};

export default ControlPanel; 